﻿@page "/Booking/List"

<PageTitle>我的预定</PageTitle>

<h3>我的预定</h3>

<MRow Class="pb-3">

    <MCol Cols="4" Sm="8">
        <MMenu @bind-Value="_datemenu"
        CloseOnContentClick="false"
        NudgeRight="40"
        Transition="scale-transition"
        OffsetY
        MaxWidth="290"
        MinWidth="290">
            <ActivatorContent>
                <MTextField Value="DateRangeText"
                Label="日期范围"
                PrependIcon="mdi-calendar"
                Readonly
                @attributes="context.Attrs"></MTextField>
            </ActivatorContent>
            <ChildContent>
                @if (_datemenu)
                {
                    <MDatePicker @bind-Value="_dates" Range FullWidth></MDatePicker>
                }
            </ChildContent>
        </MMenu>
    </MCol>


    <MCol Cols="4" Class="d-flex py-0 pb-3">
        <MSpacer></MSpacer>
        <MButton Color="primary" OnClick="()=>_alert = !_alert">搜索</MButton>
    </MCol>
    
</MRow>

<MAlert Type="AlertTypes.Info">
    弹窗测试
</MAlert>

@code {

    private bool _datemenu;

    private bool _alert = true;

    private string DateRangeText => string.Join(" ~ ", _dates.Select(date => date.ToString("yyyy-MM-dd")));

    private List<DateOnly> _dates = new List<DateOnly>
        {
            DateOnly.FromDateTime(DateTime.UtcNow), 
            DateOnly.FromDateTime(DateTime.UtcNow.AddDays(7))
        };

}
